<template>
  <div class="screenfull-btn">
    <i><svg-icon :icon-class="isFullscreen ? 'putAway' : 'spread' " class-name="reset-svg" @click="click" /></i>
  </div>
</template>

<script>
// import { mapState } from 'vuex'

// 全屏组件
/**
 * 父组件或祖宗组件通过 provide 透传侦听事件
provide(){
  return {
    screenfullChange: this.screenfullChange
  }
},
 */
export default {
  name: 'Screenfull',
  props: {
    change: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      isFullscreen: false
    }
  },
  computed: {
    // ...mapState({
    //   tabsScreenfull: (state) => state.flow.tabsScreenfull
    // })
  },
  watch: {
    // tabsScreenfull:{
    //   immediate: true,
    //   handler(){
    //     this.isFullscreen = this.tabsScreenfull
    //   }
    // }
  },
  mounted() {
  },
  methods: {
    click() {
      this.isFullscreen = !this.isFullscreen
      this.change(this.isFullscreen)
    }
  }
}
</script>

<style scoped>
.screenfull-btn{
  cursor: pointer;
}
.reset-svg{
  height:24px;
  width:24px;
}
</style>
